<template>
  <div class>
    <el-form
      :inline="true"
      :model="elform"
      class="demo-form-inline1"
      v-if="activeName=='first'?true:false"
    >
      <el-form-item class="searchmarigin">
        <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onExport" size="mini" icon="el-icon-document-copy">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onPrint" size="mini" icon="el-icon-printer">打印</el-button>
      </el-form-item>
      <el-form-item>
        <el-popover width="500" placement="top" trigger="click">
          <el-row>
            <el-checkbox
              style="width:10%"
              :label="formThead.merchantName.label"
              v-model="formThead.merchantName.checked"
              @change="checkboxChanged()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead.Morning.label"
              v-model="formThead.Morning.checked"
              @change="checkboxChanged()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead.Lunch.label"
              v-model="formThead.Lunch.checked"
              @change="checkboxChanged()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead.Dinner.label"
              v-model="formThead.Dinner.checked"
              @change="checkboxChanged()"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width:10%"
              :label="formThead.Night.label"
              v-model="formThead.Night.checked"
              @change="checkboxChanged()"
            ></el-checkbox>
            <!-- <el-checkbox style="width:10%" :label="formThead.Other.label" v-model="formThead.Other.checked" @change="checkboxChanged()"></el-checkbox> -->
            <el-checkbox
              style="width:10%"
              :label="formThead.Revise.label"
              v-model="formThead.Revise.checked"
              @change="checkboxChanged()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead.Sum.label"
              v-model="formThead.Sum.checked"
              @change="checkboxChanged()"
            ></el-checkbox>
          </el-row>
          <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
    <el-form
      :inline="true"
      :model="elform"
      class="demo-form-inline1"
      v-if="activeName=='second'?true:false"
    >
      <el-form-item class="searchmarigin">
        <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onExport" size="mini" icon="el-icon-document-copy">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onPrint" size="mini" icon="el-icon-printer">打印</el-button>
      </el-form-item>
      <el-form-item>
        <el-popover width="600" placement="top" trigger="click">
          <el-row>
            <el-checkbox
              style="width:10%"
              :label="formThead2.consumePlace.label"
              v-model="formThead2.consumePlace.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.dataMakeTime.label"
              v-model="formThead2.dataMakeTime.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.mealName.label"
              v-model="formThead2.mealName.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.sumSuccessExpenditure.label"
              v-model="formThead2.sumSuccessExpenditure.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width:10%"
              :label="formThead2.sumExpenditure.label"
              v-model="formThead2.sumExpenditure.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.consumeCount.label"
              v-model="formThead2.consumeCount.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.userCount.label"
              v-model="formThead2.userCount.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.avgExpenditure.label"
              v-model="formThead2.avgExpenditure.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width:10%"
              :label="formThead2.avgUserExpenditure.label"
              v-model="formThead2.avgUserExpenditure.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.maxExpenditure.label"
              v-model="formThead2.maxExpenditure.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.minExpenditure.label"
              v-model="formThead2.minExpenditure.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.consumeReviseSum.label"
              v-model="formThead2.consumeReviseSum.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead2.consumeReviseCount.label"
              v-model="formThead2.consumeReviseCount.checked"
              @change="checkboxChanged2()"
            ></el-checkbox>
          </el-row>
          <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
    <el-form
      :inline="true"
      :model="elform"
      class="demo-form-inline1"
      v-if="activeName=='three'?true:false"
    >
      <el-form-item class="searchmarigin">
        <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onExport" size="mini" icon="el-icon-document-copy">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onPrint" size="mini" icon="el-icon-printer">打印</el-button>
      </el-form-item>
      <el-form-item>
        <el-popover width="500" placement="top" trigger="click">
          <el-row>
            <el-checkbox
              style="width:10%"
              :label="formThead3.cardNumber.label"
              v-model="formThead3.cardNumber.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead3.userName.label"
              v-model="formThead3.userName.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead3.userNumber.label"
              v-model="formThead3.userNumber.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead3.departmentName.label"
              v-model="formThead3.departmentName.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width:10%"
              :label="formThead3.consumePlace.label"
              v-model="formThead3.consumePlace.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead3.consumeName.label"
              v-model="formThead3.consumeName.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead3.expenditure.label"
              v-model="formThead3.expenditure.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead3.newBalance.label"
              v-model="formThead3.newBalance.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width:10%"
              :label="formThead3.dataMakeTime.label"
              v-model="formThead3.dataMakeTime.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead3.chargingType.label"
              v-model="formThead3.chargingType.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead3.isSuccess.label"
              v-model="formThead3.isSuccess.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
            <el-checkbox
              style="width:10%"
              :label="formThead3.dataGatherTime.label"
              v-model="formThead3.dataGatherTime.checked"
              @change="checkboxChanged3()"
            ></el-checkbox>
          </el-row>
          <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import bus from '@/bus.js'
export default {
  data() {
    return {
      activeName: '',
      elform: {},
      //消费汇总
      formThead: {
        merchantName: {
          label: '结算单位',
          prop: 'merchantName',
          checked: true
        },
        Morning: { label: '早餐', prop: 'Morning', checked: true },
        Lunch: { label: '中餐', prop: 'Lunch', checked: true },
        Dinner: { label: '晚餐', prop: 'Dinner', checked: true },
        Night: { label: '夜宵', prop: 'Night', checked: true },
        // Other: {label: '其余时间',prop: 'Other',checked:true},
        Revise: { label: '消费修正', prop: 'Revise', checked: true },
        Sum: { label: '小计', prop: 'Sum', checked: true },

        expenditureMorning: {
          label: '金额',
          prop: 'expenditureMorning',
          checked: true
        },
        consumeCountMorning: {
          label: '消费次数',
          prop: 'consumeCountMorning',
          checked: true
        },
        timesCountMorning: {
          label: '计次消费次数',
          prop: 'timesCountMorning',
          checked: true
        },

        expenditureLunch: {
          label: '金额',
          prop: 'expenditureLunch',
          checked: true
        },
        consumeCountLunch: {
          label: '消费次数',
          prop: 'consumeCountLunch',
          checked: true
        },
        timesCountLunch: {
          label: '计次消费次数',
          prop: 'timesCountLunch',
          checked: true
        },

        expenditureDinner: {
          label: '金额',
          prop: 'expenditureDinner',
          checked: true
        },
        consumeCountDinner: {
          label: '消费次数',
          prop: 'consumeCountDinner',
          checked: true
        },
        timesCountDinner: {
          label: '计次消费次数',
          prop: 'timesCountDinner',
          checked: true
        },
        expenditureNight: {
          label: '金额',
          prop: 'expenditureNight',
          checked: true
        },
        consumeCountNight: {
          label: '消费次数',
          prop: 'consumeCountNight',
          checked: true
        },
        timesCountNight: {
          label: '计次消费次数',
          prop: 'timesCountNight',
          checked: true
        },
        expenditureOther: {
          label: '金额',
          prop: 'expenditureOther',
          checked: true
        },
        consumeCountOther: {
          label: '消费次数',
          prop: 'consumeCountOther',
          checked: true
        },
        timesCountOther: {
          label: '计次消费次数',
          prop: 'timesCountOther',
          checked: true
        },
        consumeReviseSum: {
          label: '金额',
          prop: 'consumeReviseSum',
          checked: true
        },
        consumeReviseCount: {
          label: '修正次数',
          prop: 'consumeReviseCount',
          checked: true
        },

        expenditureSum: {
          label: '金额',
          prop: 'expenditureSum',
          checked: true
        },
        consumeCountSum: {
          label: '金额',
          prop: 'consumeCountSum',
          checked: true
        },
        timesCountSum: {
          label: '计次消费次数',
          prop: 'timesCountSum',
          checked: true
        }
      },
      formThead2: {
        consumePlace: {
          label: '消费场所',
          prop: 'consumePlace',
          checked: true
        },
        dataMakeTime: { label: '日期', prop: 'dataMakeTime', checked: true },
        mealName: { label: '餐别', prop: 'mealName', checked: true },
        sumSuccessExpenditure: {
          label: '储值消费',
          prop: 'sumSuccessExpenditure',
          checked: true
        },
        consumeReviseCount: {
          label: '修正次数',
          prop: 'consumeReviseCount',
          checked: true
        },
        consumeReviseSum: {
          label: '修正金额(元)',
          prop: 'consumeReviseSum',
          checked: true
        },
        sumExpenditure: {
          label: '合计',
          prop: 'sumExpenditure',
          checked: true
        },
        consumeCount: {
          label: '消费人次',
          prop: 'consumeCount',
          checked: true
        },
        userCount: { label: '消费人数', prop: 'userCount', checked: true },
        avgExpenditure: {
          label: '平均消费(按次)',
          prop: 'avgExpenditure',
          checked: true
        },
        avgUserExpenditure: {
          label: '平均消费(按人)',
          prop: 'avgUserExpenditure',
          checked: true
        },
        maxExpenditure: {
          label: '最大消费金额',
          prop: 'maxExpenditure',
          checked: true
        },
        minExpenditure: {
          label: '最小消费金额',
          prop: 'minExpenditure',
          checked: true
        },
        timesExpenditureCount: {
          label: '计次消费次数',
          prop: 'timesExpenditureCount',
          checked: true
        }
      },
      formThead3: {
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        userName: { label: '姓名', prop: 'userName', checked: true },
        userNumber: { label: '编号', prop: 'userNumber', checked: true },
        departmentName: {
          label: '部门',
          prop: 'departmentName',
          checked: true
        },
        consumePlace: {
          label: '所属消费场所',
          prop: 'consumePlace',
          checked: true
        },
        consumeName: {
          label: '消费机名称',
          prop: 'consumeName',
          checked: true
        },
        expenditure: {
          label: '消费金额(元)',
          prop: 'expenditure',
          checked: true
        },
        newBalance: { label: '卡内余额', prop: 'newBalance', checked: true },
        dataMakeTime: {
          label: '消费时间',
          prop: 'dataMakeTime',
          checked: true
        },
        chargingType: {
          label: '交易类型',
          prop: 'chargingType',
          checked: true
        },
        isSuccess: { label: '交易状态', prop: 'isSuccess', checked: true },
        dataGatherTime: {
          label: '采集时间',
          prop: 'dataGatherTime',
          checked: true
        }
      }
    }
  },
  methods: {
    firstinit(id) {
      this.activeName = id
    },
    //  查询
    onSubmit() {
      this.$emit('refreshDataList', this.activeName)
    },
    // 导出
    onExport() {
      this.$emit('ExDataList', this.activeName)
    },
    // 打印
    onPrint() {
      this.$emit('printList', this.activeName)
    },
    checkboxChanged() {
      bus.$emit('listenToA', this.formThead)
    },
    checkboxChanged2() {
      bus.$emit('listenToB', this.formThead2)
    },
    checkboxChanged3() {
      bus.$emit('listenToC', this.formThead3)
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-form-inline,
.demo-form-inline1 {
  height: 38px;
}
</style>